<template>
  <div class="AllOrder">
    <van-tabs v-model="active" @click="dianJi">
      <van-tab v-for="item in statusList" :title="item.title" :key="item">
        <div class="box_one box" v-for="list in orderVoList" >
          <p class="title">
            <span>
              <van-icon name="shop-o" size="14"/>{{list.shopsName}}
<!--              <svg viewBox="0 0 1000 1000" class="demo-nav__back1">-->
<!--                <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>-->
<!--              </svg>-->
            </span>
            <span class="unpaid">{{list.orderStatus==1?'待付款':(list.orderStatus==2?'待发货':(list.orderStatus==3?'待收货':(list.orderStatus==4?'交易成功':'待处理')))}}</span>
          </p>
          <div class="border"></div>
          <ul class="list">
            <li class="list_one">
              <p>
                <van-image width="4rem" height="4rem" fit="cover" :src="list.picUrl"/>
              </p>
              <div style="width: 240px">
                <h3 class="one_top">商品名称：{{list.productName}}</h3>
                <h3 class="one_bottom">
                  <span class="left">{{list.labelName}},{{list.labelUnit}}</span>
                  <p class="right">
                    <span>￥{{list.labelPrice}}</span>
                    <span style="font-size: 10px;color: #666666;">×{{list.productCnt}}</span>
                  </p>
                </h3>
                <h3 class="one_top">店铺名称：{{list.shopsName}}</h3>
                <h3 class="one_top">订单编号：{{list.orderSn}}</h3>

              </div>
            </li>

            <li class="total">合计：￥{{list.paymentMoney}}</li>
            <div class="van_btn">
              <van-button round @click="cancelOrderVo(list)" v-if="list.orderStatus==1">取消订单</van-button>
              <van-button round @click="deleteOrderVo(list)" v-if="list.orderStatus==4">删除订单</van-button>
              <van-button class="zhu" round  @click="fukuan(list)" v-if="list.orderStatus==1">我要付款</van-button>
              <van-button class="zhu" round  @click="retreatOrderVo(list)" v-if="list.orderStatus==2 || list.orderStatus==3">申请退货</van-button>
              <van-button class="zhu" round  @click="confirmOrderVo(list)" v-if="list.orderStatus==3">确认收货</van-button>
              <van-button class="zhu" round  @click="evaluateOrderVo(list)" v-if="list.orderStatus==4 && list.commentStatus==0">评价</van-button>
            </div>
<!--            <div class="btn">-->

<!--            </div>-->
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <van-dialog v-model="quxiao" title="提示" show-cancel-button @confirm="quxiao1()">
      <p>是否取消订单，请确认操作</p>
    </van-dialog>
    <van-dialog v-model="shanchu" title="提示" show-cancel-button @confirm="shanchu1()">
      <p>是否删除订单，请确认操作</p>
    </van-dialog>
    <van-dialog v-model="queren" title="提示" show-cancel-button @confirm="queren1()">
      <p>是否已收到商品，请确认操作</p>
    </van-dialog>
  </div>
</template>

<script>
  import { selectOrderVoList,updateOrderVo } from '@/api/commodity/order_master.js';
  import { Dialog } from 'vant';
export default {
  name: "AllOrder",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data(){
    return{
      quxiao:false,
      shanchu:false,
      queren:false,
      //状态下标
      active:0,
      //状态列表
      statusList:[
        {
          title:'全部订单',
          id:'0',
        },
        {
          title:'待付款',
          id:'1',
        },
        {
          title:'待发货',
          id:'2',
        },
        {
          title:'待收货',
          id:'3',
        },
        {
          title:'已收货',
          id:'4',
        },
        {
          title:'退货',
          id:'8',
        },
        {
          title:'换货',
          id:'9',
        },
      ],
      //查询订单参数
      orderVo:{
        orderStatus:'',
      },
      //订单修改操作参数
      upOrderVo:{
        orderStatus:'',
        orderId:'',
      },
      //订单列表
      orderVoList:[],

    }
  },
  created(){
    if(this.$route.query.active!=null && this.$route.query.active!=''){
      this.active = parseInt(this.$route.query.active);
    }
    this.orderVo.orderStatus = this.active;
    this.getSelectOrderVoList(this.orderVo);

  },
  methods:{
    //返回上一级
    toBack(){
      this.$router.go(-1);//返回上一层
    },
    //点击标题栏
    dianJi(name,title){
      this.orderVo.orderStatus = name;
      this.getSelectOrderVoList(this.orderVo);
      console.log(name,title);
    },
    //查询订单信息
    getSelectOrderVoList(orderVo){
      if(orderVo.orderStatus==5){
        orderVo.orderStatus = 8;
      }else if(orderVo.orderStatus==6){
        orderVo.orderStatus = 9;
      }
      console.log(orderVo.orderStatus);
      selectOrderVoList(orderVo).then((res)=>{
        if(res.data.code==200){
          console.log(res.data.data)
          this.orderVoList = res.data.data;
        }
        console.log(res,"123456789");
      })
    },
    //取消订单
    cancelOrderVo(list){
      this.upOrderVo.orderId = list.orderId;
      this.upOrderVo.orderStatus = 7;
      this.quxiao = true;
    },
    quxiao1(){
      updateOrderVo(this.upOrderVo).then((res)=>{
        if(res.data.code==200){
          this.getSelectOrderVoList(this.orderVo);
          console.log(res,"1");
        }
      })
    },
    //删除订单
    deleteOrderVo(list){
      this.upOrderVo.orderId = list.orderId;
      this.upOrderVo.orderStatus = 6;
      this.shanchu = true;
    },
    shanchu1(){
      updateOrderVo(this.upOrderVo).then((res)=>{
        if(res.data.code==200){
          this.getSelectOrderVoList(this.orderVo);
          console.log(res,"2");
        }
      })
    },

    //我要付款
    fukuan(list){
      // console.log("***"+list.orderId)
      this.$router.push({
        path:"/MaterialPay",
        query:{
          orderId:list.orderId,
          totalPrice:list.paymentMoney,
          supplierId:list.supplierId
        }});
    },

    //申请退货
    retreatOrderVo(list){
      sessionStorage.setItem('list',JSON.stringify(list));
      this.$router.push({ path:'/ReturnRefund'})
    },
    //确认收货
    confirmOrderVo(list){
      this.upOrderVo.orderId = list.orderId;
      this.upOrderVo.orderStatus = 4;
      this.queren = true;
    },
    queren1(){
      updateOrderVo(this.upOrderVo).then((res)=>{
        if(res.data.code==200){
          this.getSelectOrderVoList(this.orderVo);
          console.log(res,"3");
        }
      })
    },
    //去评价
    evaluateOrderVo(list){
      sessionStorage.setItem('list',JSON.stringify(list));
      this.$router.push({ path:'/EvaluateOrder'});
    },


  },

}
</script>

<style scoped>
.AllOrder {
  background-color: rgba(238, 238, 238, 100);
  padding-bottom: 20px;
}

.box {
  width: 93%;
  margin: 1rem auto;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
}
.van_btn {
  /*background-color: #3a8ee6;*/
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
}


.box .title {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 1rem;
}

.demo-nav__back1 {
  width: 1rem;
  transform: rotateZ(180deg);
}

.unpaid {
  color: #fb5d63;
  font-size: 13px;
}

.list {
  width: 100%;
}

.list .list_one {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-left: 29px;
  margin-top: 16px;
}

.one_top {
  width: 70%;
  font-size: 12px;
  color: #222222;
  text-align: left;
  margin-left: 1rem;
}

.one_bottom {
  display: flex;
  justify-content: space-between;
  margin: 5.733vw 30px 0 1rem;
}

.one_bottom .left {
  font-size: 12px;
  color: #666666;
}

.one_bottom .right {
  font-size: 14px;
  color: rgba(34, 34, 34, 100);
  margin-right: 30px;
}

.total {
  color: rgba(34, 34, 34, 100);
  font-size: 16px;
  text-align: right;
  margin-right: 30px;
}
.btn{
  background-color: #3a8ee6;
}

.btn {
  /*margin: 3rem 2rem 1rem 0rem;*/
  /*text-align: right;*/
}

.btn span {
  display: inline-block;
  width: 74px;
  height: 26px;
  line-height: 26px;
  /*border-radius: 16px;*/
  /*color: rgba(102, 102, 102, 53);*/
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  /*border: 1px solid rgba(219, 219, 219, 100);*/
}

.btn .left_btn {
  margin-right: 16px;
}

.btn .right_btn {
  color: white;
  border-color: #fb5d63;
}

.border {
  width: 95%;
  margin: 0 auto;
  height: NaNpx;
  border: 1px solid rgba(247, 247, 247, 100);
}
  .zhu{
    color: #fb5d63;
    font-size: 14px;
    width: 100px;
  height: 40px;
    border: 1px #fb5d63 solid
  }
</style>
